<template>
 <div>
  御剑乘风来,除魔天地间!
  <hr>
   <ButtonCom color="blue" round="round" title="按钮"></ButtonCom>
  <ul>
     <li>
        <router-link to="/exact" >我是第1个li标签</router-link>
      </li>
     <li>
        <router-link to="/second" >我是第2个li标签</router-link>
      </li>
     <li>
        <router-link to="/third" >我是第3个li标签</router-link>
      </li>
      <li @click="handle1">我是一</li>
      <li @click="handle2">我是二</li>
      <li @click="handle3">我是三</li>
  </ul>
  <router-view></router-view>
 </div>
</template>
<script>
import ButtonCom from './router-mode/ButtonCom'
export default{
    name:'',
    components:{
      ButtonCom
    },
    data () {
        return {
            '$router.fullPath'(newval){
              console.log(newval)
              
            }
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
      handle1(){
        this.$router.push({
          path:'/'
        }).catch(arr=>{})
      },
      handle2(){
         this.$router.push({
          path:'/second',
          query:{
            name:'niuniu',
            age:2
          }
        }).catch(arr=>{})
      },
       handle3(){
         this.$router.push({
          name:'Third',
          query:{
            name:'刘某',
            age:18
          },
          params:{
            id:3,
            name:'张某'
          }
         }).catch(arr=>{})
       }
    }
}
</script>
<style lang='less'  scoped>
    ul {
  display: flex;
  li {
    margin: 20px;
    a {
      text-decoration: none;
    }
  }
}


.router-link-active {
  background-color: pink;
}
// .bb {
//   background-color: pink;
// }
</style>
